<template>
  <div class="app">
    <h1>{{msg}}</h1>
    <!-- 如果要在父组件中展示学生名字，两种自定义组件的方式都能实现：在data中声明参数，在方法中赋值就行了
        注意点：如果采用第二种方式且不调用方法，直接在mounted中赋值，看下面mounted代码 -->
    <h2>传递过来的学生名字：{{studentName}}</h2>
    <!-- 第一种方式 -->
    <!-- <Student v-on:test1="getStudentName" @test3="t1"/> -->

    <!-- 第二种方式 -->
    <!-- <Student ref="student"/> -->

    <!-- 组件中使用原生时事件，需要native(原生)修饰-否则会被认为是自定义事件 -->
    <Student ref="student" @click.native="showq"/>

  </div>
</template>

<script>
// 引入Student组件
import Student from './components/Student'
import School from './components/School'

export default {
    name:'App',
    data() {
      return {
        msg:'信息展示：',
        studentName:''
      }
    },
    components:{
        Student,School
    },
    methods:{
      //获取学校名称
      getSchoolName(schoolName){
        console.log(schoolName)
      },
      //获取学生名称，如果是传递多个参数，指定第一个为studentName，其余参数不管，可以用...params代替
      getStudentName(studentName,...params){
        console.log('getStudentName被调用',studentName)
        this.studentName = studentName
      },
      t1(){
        console.log('test3事件被触发。。。')
      },
      showq(){
        alert('qq')
      }
    },
    mounted(){
      this.$refs.student.$on('test1',this.getStudentName)

      // 注意点直接在这里赋值，不能使用普通函数，要使用箭头函数，使其this指向外部App组件实例
      // this.$refs.student.$on('test1',function(studentName,...params){
      //   console.log('getStudentName被调用',studentName)
      //   this.studentName = studentName
      // })
      // this.$refs.student.$on('test1',(studentName,...params)=>{
      //   console.log('getStudentName被调用',studentName)
      //   this.studentName = studentName
      // })
    }

}
</script>

<style scoped>
.app{
  background-color:gray;
  padding: 3px;
}
</style>